<!--
 @Description 创新工作室(固定数量)
 @date 2023/1/10
-->
<template>
  <div
    v-if="list.length >0"
    class="innovation-studio-fixed-list-page"
    :style="{
      marginTop: top,
      padding: '0 ' + spacing+' 0'
    }"
  >
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :option="option"
      :hide-desc="option.isMore === '2'"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <ul
      :style="{
        'border-radius':
          !isShowModuleName && option.isMore === '2' ? radiusSize : '0 0 '+ radiusSize+ ' ' + radiusSize
      }"
    >
      <li
        v-for="(item, i) in list"
        :key="i"
        class="innovationStudioItem"
      >
        <div class="mainItem">
          <div class="innovImg">
            <div class="dwImg">
              <van-image
                :src="setImgPath(item.coverImgId, item.coverImgIdUrl)"
                :fit="imgType"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
            </div>
          </div>
          <div class="innovMain">
            <div class="lineOne ellipsis">{{ item.mainTitle || '' }}</div>
            <div class="lineTwo ellipsis">
              {{ item.param2 || '' }}
            </div>
            <div class="lineThree ellipsis">
              成立时间：{{ item.publishTime || '' }}
            </div>
            <div class="toDetail" />
          </div>
        </div>
      </li>
    </ul>

  </div>
</template>

<script>
import mixins from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'InnovationStudioFixedList',
  components: { CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      signId: ''
    }
  },
  computed: {},
  async created() {
    if (this.isInitData) {
      this.getDataByCode('classifyDataList')
    } else {
      this.list = [
        {
          id: '4748ec98-f572-4bf7-8021-d7e8b57abce8',
          mainTitle: '创新工作室',
          briefIntroduction: '简介',
          coverImgId: '',
          coverImgIdUrl: '',
          publisher: '姓名',
          publishTime: '2020-01-15',
          bid: '2e87a99e-bf00-4418-95c3-87ab99e8173d'
        },
        {
          id: '5ccf43d2-4c98-456d-bc01-efc9edf9fa4b',
          mainTitle: '创新工作室',
          briefIntroduction: '简介',
          coverImgId: '',
          coverImgIdUrl: '',
          publisher: '姓名',
          publishTime: '2018-06-01',
          bid: '2e87a99e-bf00-4418-95c3-87ab99e8173d'
        }
      ]
    }
  },
  methods: {
    setData(result) {
      if (result.classifyDataList) {
        const { data } = result.classifyDataList
        if (data.configValue) {
          try {
            const config = JSON.parse(data.configValue)
            if (Object.prototype.toString.call(config) === '[object Array]') {
              const ids = config.map((item) => {
                return item.id
              })
              this.signId =
                  ids.join(',')
            } else {
              this.signId = data.configValue.id
            }
            if (this.signId) {
              this.getDataByCode('dataList')
            }
          } catch (e) {

          }
        }
      }
      if (result.dataList) {
        const { data } = result.dataList || {}
        this.list = data || []
      }
    },
    goDetail(item) {
      //   this.$router.push({
      //     path: '/innovationStudioDetail',
      //     name: 'InnovationStudioDetail',
      //     query: { i: item.id }
      //   })
    },
    getValue() {
      const { signId } = this
      return { signId }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.innovation-studio-fixed-list-page {
  > ul {
    background-color: #fff;
    padding: rem(20) rem(20) rem(1);
    border-radius: rem(12);

    .innovationStudioItem {
      margin-bottom: rem(20);
      height: rem(230);
      padding-top: rem(30);
      background-color: #fff;

      .mainItem {
        background-color: #f6f9ff;
        height: rem(200);
        border-radius: rem(16);
        display: flex;

        .innovImg {
          height: rem(200);
          width: rem(184);

          .dwImg {
            width: 100%;
            height: 100%;
            position: relative;

            .van-image {
              display: inline-block;
              position: absolute;
              top: rem(-30);
              width: 100%;
              height: rem(200);
              border-radius: rem(12);

              img {
                width: 100%;
                height: 100%;
                border-radius: rem(12);
              }

              .van-image__error {
                border-radius: rem(12);

                > img {
                  width: rem(120);
                  height: rem(120);
                }
              }
            }

            //   .simg {
            //     display: inline-block;
            //     position: absolute;
            //     top: rem(-30);
            //     width: 100%;
            //     height: rem(200);
            //     border-radius: rem(12);
            //   }
          }
        }

        .innovMain {
          margin-left: rem(20);
          flex: 1;
          width: 0;
          position: relative;

          .ellipsis {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }

          .lineOne {
            margin-top: rem(30);
            font-size: rem(30);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: left;
            color: #333333;
          }

          .lineTwo {
            margin-top: rem(20);
            opacity: 1;
            font-size: rem(24);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
          }

          .lineThree {
            margin-top: rem(20);
            font-size: rem(24);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #999999;
            width: 90%;
          }

          .toDetail {
            @include bg-color($mainColor);
            position: absolute;
            height: rem(48);
            width: rem(48);
            right: rem(-10);
            top: rem(76);
            border-radius: rem(12);
            background-image: url('./images/to-detail.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

}
</style>
